<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      /* 开启怪异盒子 */
      box-sizing: border-box;
    }

    .container {
      width: 1000px;
      margin: 0 auto;
    }

    h2 {
      padding: 20px 0;
    }

    hr {
      margin: 0px 0 20px;
    }

    .hero-wrapper {
      margin: 0 -10px;
    }

    .hero-item {
      width: 10%;
      float: left;
      padding: 0 10px;
    }

    .hero-item .img {
      overflow: hidden;
      position: relative;
      font-size: 0;
    }

    .hero-item img {
      width: 100%;
      transform: scale(1);
      transition: all 0.3s;
    }

    .hero-item:hover img {
      transform: scale(1.2);
    }

    p {
      text-align: center;
      padding: 5px 0 15px;
      font-size: 14px;
    }

    .mask {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
    }

    .hero-item:hover .mask {
      background: rgba(0, 0, 0, 0.3);
    }

    .search {
      padding-bottom: 20px;
      text-align: right;
    }

    .center {
      text-align: center;
    }
  </style>
</head>

<body>
  <div class="container">
    <h2>欢迎来到王者荣耀</h2>
    <hr />
    <div class="search">
      <input type="text"><button>搜索</button>
    </div>
    <hr />
    <div class="hero-wrapper">

    </div>

    <script>
      //封装函数根据数组创建英雄结构
      function createHeros(data) {
        //循环
        for (let i = 0; i < data.length; i++) {
          //创建 div 元素
          let div = document.createElement('div');
          //为 div 设置 class 类名
          div.className = 'hero-item';
          //创建 img 的容器 div
          let imgDiv = document.createElement('div');
          //设置这个div的 class 类名
          imgDiv.className = 'img';
          //创建 img 标签
          let img = document.createElement('img');
          //设置 img 元素的 src 属性
          img.src = 'http://cdn.xiaohigh.com' + data[i].image;
          //创建一个遮罩元素
          let mask = document.createElement('div');
          mask.className = 'mask';

          //创建 p 元素
          let p = document.createElement('p');
          //设置 p 元素的文本
          p.innerHTML = data[i].name;
          //拼接结构
          imgDiv.append(img);
          //将遮罩层插入到 imgDiv 中
          imgDiv.append(mask);
          //将 imgDiv 和 p 放置到最外层的 div 中
          div.append(imgDiv);
          div.append(p);
          //将创建好的 div 元素插入到
          heroWrapper.append(div);
        }
      }
      //英雄数组
      let heros = [
        {
          "name": "云缨",
          "image": "/images/heros/538.jpg"
        },
        {
          "name": "艾琳",
          "image": "/images/heros/155.jpg"
        },
        {
          "name": "司空震",
          "image": "/images/heros/537.jpg"
        },
        {
          "name": "澜",
          "image": "/images/heros/528.jpg"
        },
        {
          "name": "夏洛特",
          "image": "/images/heros/536.jpg"
        },
        {
          "name": "阿古朵",
          "image": "/images/heros/533.jpg"
        },
        {
          "name": "蒙恬",
          "image": "/images/heros/527.jpg"
        },
        {
          "name": "镜",
          "image": "/images/heros/531.jpg"
        },
        {
          "name": "蒙犽",
          "image": "/images/heros/524.jpg"
        },
        {
          "name": "鲁班大师",
          "image": "/images/heros/525.jpg"
        },
        {
          "name": "西施",
          "image": "/images/heros/523.jpg"
        },
        {
          "name": "马超",
          "image": "/images/heros/518.jpg"
        },
        {
          "name": "曜",
          "image": "/images/heros/522.jpg"
        },
        {
          "name": "云中君",
          "image": "/images/heros/506.jpg"
        },
        {
          "name": "瑶",
          "image": "/images/heros/505.jpg"
        },
        {
          "name": "盘古",
          "image": "/images/heros/529.jpg"
        },
        {
          "name": "猪八戒",
          "image": "/images/heros/511.jpg"
        },
        {
          "name": "嫦娥",
          "image": "/images/heros/515.jpg"
        },
        {
          "name": "上官婉儿",
          "image": "/images/heros/513.jpg"
        },
        {
          "name": "李信",
          "image": "/images/heros/507.jpg"
        },
        {
          "name": "沈梦溪",
          "image": "/images/heros/312.jpg"
        },
        {
          "name": "伽罗",
          "image": "/images/heros/508.jpg"
        },
        {
          "name": "盾山",
          "image": "/images/heros/509.jpg"
        },
        {
          "name": "司马懿",
          "image": "/images/heros/137.jpg"
        },
        {
          "name": "孙策",
          "image": "/images/heros/510.jpg"
        },
        {
          "name": "元歌",
          "image": "/images/heros/125.jpg"
        },
        {
          "name": "米莱狄",
          "image": "/images/heros/504.jpg"
        },
        {
          "name": "狂铁",
          "image": "/images/heros/503.jpg"
        },
        {
          "name": "弈星",
          "image": "/images/heros/197.jpg"
        },
        {
          "name": "裴擒虎",
          "image": "/images/heros/502.jpg"
        },
        {
          "name": "杨玉环",
          "image": "/images/heros/176.jpg"
        },
        {
          "name": "公孙离",
          "image": "/images/heros/199.jpg"
        },
        {
          "name": "明世隐",
          "image": "/images/heros/501.jpg"
        },
        {
          "name": "女娲",
          "image": "/images/heros/179.jpg"
        },
        {
          "name": "梦奇",
          "image": "/images/heros/198.jpg"
        },
        {
          "name": "苏烈",
          "image": "/images/heros/194.jpg"
        },
        {
          "name": "百里玄策",
          "image": "/images/heros/195.jpg"
        },
        {
          "name": "百里守约",
          "image": "/images/heros/196.jpg"
        },
        {
          "name": "铠",
          "image": "/images/heros/193.jpg"
        },
        {
          "name": "鬼谷子",
          "image": "/images/heros/189.jpg"
        },
        {
          "name": "干将莫邪",
          "image": "/images/heros/182.jpg"
        },
        {
          "name": "东皇太一",
          "image": "/images/heros/187.jpg"
        },
        {
          "name": "大乔",
          "image": "/images/heros/191.jpg"
        },
        {
          "name": "黄忠",
          "image": "/images/heros/192.jpg"
        },
        {
          "name": "诸葛亮",
          "image": "/images/heros/190.jpg"
        },
        {
          "name": "哪吒",
          "image": "/images/heros/180.jpg"
        },
        {
          "name": "太乙真人",
          "image": "/images/heros/186.jpg"
        },
        {
          "name": "蔡文姬",
          "image": "/images/heros/184.jpg"
        },
        {
          "name": "雅典娜",
          "image": "/images/heros/183.jpg"
        },
        {
          "name": "杨戬",
          "image": "/images/heros/178.jpg"
        },
        {
          "name": "成吉思汗",
          "image": "/images/heros/177.jpg"
        },
        {
          "name": "钟馗",
          "image": "/images/heros/175.jpg"
        },
        {
          "name": "虞姬",
          "image": "/images/heros/174.jpg"
        },
        {
          "name": "李元芳",
          "image": "/images/heros/173.jpg"
        },
        {
          "name": "张飞",
          "image": "/images/heros/171.jpg"
        },
        {
          "name": "刘备",
          "image": "/images/heros/170.jpg"
        },
        {
          "name": "后羿",
          "image": "/images/heros/169.jpg"
        },
        {
          "name": "牛魔",
          "image": "/images/heros/168.jpg"
        },
        {
          "name": "孙悟空",
          "image": "/images/heros/167.jpg"
        },
        {
          "name": "亚瑟",
          "image": "/images/heros/166.jpg"
        },
        {
          "name": "橘右京",
          "image": "/images/heros/163.jpg"
        },
        {
          "name": "娜可露露",
          "image": "/images/heros/162.jpg"
        },
        {
          "name": "不知火舞",
          "image": "/images/heros/157.jpg"
        },
        {
          "name": "张良",
          "image": "/images/heros/156.jpg"
        },
        {
          "name": "花木兰",
          "image": "/images/heros/154.jpg"
        },
        {
          "name": "兰陵王",
          "image": "/images/heros/153.jpg"
        },
        {
          "name": "王昭君",
          "image": "/images/heros/152.jpg"
        },
        {
          "name": "韩信",
          "image": "/images/heros/150.jpg"
        },
        {
          "name": "刘邦",
          "image": "/images/heros/149.jpg"
        },
        {
          "name": "姜子牙",
          "image": "/images/heros/148.jpg"
        },
        {
          "name": "露娜",
          "image": "/images/heros/146.jpg"
        },
        {
          "name": "程咬金",
          "image": "/images/heros/144.jpg"
        },
        {
          "name": "安琪拉",
          "image": "/images/heros/142.jpg"
        },
        {
          "name": "貂蝉",
          "image": "/images/heros/141.jpg"
        },
        {
          "name": "关羽",
          "image": "/images/heros/140.jpg"
        },
        {
          "name": "老夫子",
          "image": "/images/heros/139.jpg"
        },
        {
          "name": "武则天",
          "image": "/images/heros/136.jpg"
        },
        {
          "name": "项羽",
          "image": "/images/heros/135.jpg"
        },
        {
          "name": "达摩",
          "image": "/images/heros/134.jpg"
        },
        {
          "name": "狄仁杰",
          "image": "/images/heros/133.jpg"
        },
        {
          "name": "马可波罗",
          "image": "/images/heros/132.jpg"
        },
        {
          "name": "李白",
          "image": "/images/heros/131.jpg"
        },
        {
          "name": "宫本武藏",
          "image": "/images/heros/130.jpg"
        },
        {
          "name": "典韦",
          "image": "/images/heros/129.jpg"
        },
        {
          "name": "曹操",
          "image": "/images/heros/128.jpg"
        },
        {
          "name": "甄姬",
          "image": "/images/heros/127.jpg"
        },
        {
          "name": "夏侯惇",
          "image": "/images/heros/126.jpg"
        },
        {
          "name": "周瑜",
          "image": "/images/heros/124.jpg"
        },
        {
          "name": "吕布",
          "image": "/images/heros/123.jpg"
        },
        {
          "name": "芈月",
          "image": "/images/heros/121.jpg"
        },
        {
          "name": "白起",
          "image": "/images/heros/120.jpg"
        },
        {
          "name": "扁鹊",
          "image": "/images/heros/119.jpg"
        },
        {
          "name": "孙膑",
          "image": "/images/heros/118.jpg"
        },
        {
          "name": "钟无艳",
          "image": "/images/heros/117.jpg"
        },
        {
          "name": "阿轲",
          "image": "/images/heros/116.jpg"
        },
        {
          "name": "高渐离",
          "image": "/images/heros/115.jpg"
        },
        {
          "name": "刘禅",
          "image": "/images/heros/114.jpg"
        },
        {
          "name": "庄周",
          "image": "/images/heros/113.jpg"
        },
        {
          "name": "鲁班七号",
          "image": "/images/heros/112.jpg"
        },
        {
          "name": "孙尚香",
          "image": "/images/heros/111.jpg"
        },
        {
          "name": "嬴政",
          "image": "/images/heros/110.jpg"
        },
        {
          "name": "妲己",
          "image": "/images/heros/109.jpg"
        },
        {
          "name": "墨子",
          "image": "/images/heros/108.jpg"
        },
        {
          "name": "赵云",
          "image": "/images/heros/107.jpg"
        },
        {
          "name": "小乔",
          "image": "/images/heros/106.jpg"
        },
        {
          "name": "廉颇",
          "image": "/images/heros/105.jpg"
        }
      ];
      //获取英雄的容器
      let heroWrapper = document.querySelector('.hero-wrapper');
      //显示所有的英雄
      createHeros(heros);
      //获取 button 和 input 元素
      let btn = document.querySelector('button');
      let input = document.querySelector('input');
      //为 btn 元素绑定单机事件
      btn.onclick = function () {
        //获取用户输入的关键字
        let keyword = input.value;// input 是 input 标签对应的对象, .value 可以获取该输入框的输入的值
        //就可以用关键字到 heros 的数组当中查询满足条件的应用
        let result = heros.filter((item) => {
          //判断该英雄是否满足条件
          if (item.name.includes(keyword)) {
            return true;
          } else {
            return false;
          }
        });
        //清空英雄的列表
        heroWrapper.innerHTML = '';
        //检测是否有搜索结果
        if (result.length === 0) {
          heroWrapper.innerHTML = '<h2 class="center">没有找到相关的英雄</h2>';
          return;
        }
        //根据搜索后的结果, 创建英雄的列表
        createHeros(result);
      }


      //检测一个字符串中, 是否包含另一个字符串
      // let str = 'i miss you every much!!';
      // let test = 'abc';
      // console.log(str.includes(test)); //include 包含

      //对数组进行筛选
      // let arr = [1,2,3,4,5,90,26,19];
      //筛选所有的偶数
      // let result = [];
      // for(let i=0;i<arr.length;i++){
      //   if(arr[i] % 2 === 0){
      //     //如果是偶数
      //     result.push(arr[i]);
      //   }
      // }
      // console.log(result);
      //调用数组的 filter 方法进行筛选
      // let result = arr.filter((item) => {
      //   //判断
      //   if(item % 2 === 0){
      //     return true;
      //   }
      //   return false;
      // });

      // console.log(result);


    </script>
  </div>
</body>

</html>